<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>新增菜单</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      body { font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background: #121212; }
      .main-card {
        background: linear-gradient(120deg, #1F1F1F 60%, #2A2A2A 100%);
        border-radius: 22px;
        box-shadow: 0 6px 32px #000A, 0 1.5px 0 #232323 inset;
        margin-bottom: 28px;
        padding: 28px 20px;
        border: 1.5px solid #232323;
        backdrop-filter: blur(4px);
        position: relative;
        overflow: hidden;
      }
      .main-card::before {
        content: '';
        display: block;
        position: absolute;
        left: 0; top: 0; right: 0; height: 4px;
        background: linear-gradient(90deg, #FE2C55 0%, #00F2EA 100%);
        border-radius: 22px 22px 0 0;
        opacity: 0.8;
      }
      .section-title { font-size: 18px; font-weight: 600; color: #FE2C55; margin-bottom: 16px; display: flex; align-items: center; letter-spacing: 1px; }
      .section-title i { margin-right: 8px; color: #FE2C55; }
      .input-warm {
        background: #232323;
        color: #fff;
        border: 1px solid #FE2C55;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 15px;
        margin-bottom: 18px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
      }
      .input-warm::placeholder { color: #E6E6E6; }
      .upload-img-box {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 18px;
      }
      .upload-img-preview {
        width: 72px;
        height: 72px;
        border-radius: 12px;
        object-fit: cover;
        background: #232323;
        border: 1.5px solid #00f2ea;
        box-shadow: 0 2px 8px #00f2ea33;
        display: none;
      }
      .upload-img-label {
        display: inline-block;
        background: linear-gradient(90deg, #fe2c55 0%, #00f2ea 100%);
        color: #fff;
        font-weight: bold;
        border-radius: 8px;
        padding: 0.5rem 1.2rem;
        cursor: pointer;
        font-size: 1rem;
        box-shadow: 0 2px 8px #fe2c5533;
        transition: background 0.18s;
      }
      .upload-img-label:hover {
        background: linear-gradient(90deg, #00f2ea 0%, #fe2c55 100%);
      }
      .upload-img-input {
        display: none;
      }
      .submit-btn { background: linear-gradient(90deg, #FE2C55 60%, #00F2EA 100%); color: #fff; border: none; border-radius: 14px; padding: 12px 0; font-size: 16px; font-weight: 600; width: 100%; margin-top: 8px; box-shadow: 0 2px 8px #FE2C5533; transition: background 0.2s; }
      .submit-btn:active { background: linear-gradient(90deg, #FE2C55 80%, #00F2EA 100%); }
    </style>
  </head>
  <body class="min-h-screen">
    <div class="max-w-md mx-auto py-10 px-4">
      <div class="main-card">
        <div class="section-title"><i class="fa fa-plus"></i>新增菜单</div>
        <input class="input-warm" placeholder="菜品名称，如红烧肉" />
        <div class="upload-img-box">
          <label class="upload-img-label">
            <i class="fa fa-image mr-1"></i>上传图片
            <input
              type="file"
              accept="image/*"
              class="upload-img-input"
              id="imgInput"
              onchange="previewImg(event)"
            />
          </label>
          <img id="imgPreview" class="upload-img-preview" />
        </div>
        <textarea
          class="input-warm"
          rows="2"
          placeholder="备注（如口味、适合人群等，可选）"
        ></textarea>
        <textarea
          class="input-warm"
          rows="2"
          placeholder="原材料（如五花肉、酱油、糖等）"
        ></textarea>
        <textarea
          class="input-warm"
          rows="3"
          placeholder="做法（如步骤说明）"
        ></textarea>
        <button class="submit-btn">新增</button>
      </div>
    </div>
    <script>
      function previewImg(e) {
        const file = e.target.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = function(evt) {
          const img = document.getElementById('imgPreview');
          img.src = evt.target.result;
          img.style.display = 'block';
        };
        reader.readAsDataURL(file);
      }
    </script>
  </body>
</html>
